<template>
  <div class="device-overview-container">
    <!-- 上部分：设备概况 -->
    <div class="panel-section device-overview-section">
      <div class="panel-title">设备概况</div>
      <div class="panel-content">
        <!-- 柱状图区域 -->
        <div class="chart-container" ref="chartRef"></div>
        <!-- 3D模型查看按钮 -->
        <div class="model-buttons">
          <button class="model-btn" @click="loadFanModel">查看风机模型</button>
        </div>
      </div>
    </div>
    
    <!-- 下部分：设备运行态势 -->
    <div class="panel-section device-status-section">
      <div class="panel-title">设备运行态势</div>
      <div class="panel-content">
        <!-- 标签和搜索区域 -->
        <div class="tabs-search-container">
          <div class="tabs">
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'alarm' }" 
              @click="switchTab('alarm')"
            >设备告警</div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'fault' }" 
              @click="switchTab('fault')"
            >设备故障</div>
          </div>
          <div class="search-box">
            <input type="text" placeholder="请输入隧道名称" />
            <div class="search-icon">
              <i class="fas fa-search"></i>
            </div>
          </div>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
          <table class="device-table">
            <thead>
              <tr>
                <th>隧道类型</th>
                <th>隧道名称</th>
                <th>设备名称</th>
                <th>桩号</th>
                <th v-if="activeTab === 'alarm'">告警内容 <span class="badge table-badge">23</span></th>
                <th v-else>故障内容 <span class="badge table-badge">23</span></th>
              </tr>
            </thead>
            <tbody>
              <template v-if="activeTab === 'alarm'">
                <tr v-for="(item, index) in tableDataAlarm" :key="'alarm-' + index" class="table-row">
                  <td>{{ item.tunnelType }}</td>
                  <td>{{ item.tunnelName }}</td>
                  <td>{{ item.deviceName }}</td>
                  <td>{{ item.deviceId }}</td>
                  <td>
                    <span v-if="item.content === '车辆碰撞起火'" class="alert-content">{{ item.content }}</span>
                    <span v-else>{{ item.content }}</span>
                  </td>
                </tr>
              </template>
              <template v-else>
                <tr v-for="(item, index) in tableDataFault" :key="'fault-' + index" class="table-row">
                  <td>{{ item.tunnelType }}</td>
                  <td>{{ item.tunnelName }}</td>
                  <td>{{ item.deviceName }}</td>
                  <td>{{ item.deviceId }}</td>
                  <td>{{ item.faultContent }}</td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, inject } from "vue";
import * as echarts from "echarts";

// 尝试获取全局Cesium和SuperMap引用
let Cesium = window.Cesium;
let SuperMap = window.SuperMap;

// 动态加载SuperMap库
function loadSuperMapSDK() {
  return new Promise((resolve) => {
    // 检查SuperMap组件是否已加载
    if (window.SuperMap3D || window.Cesium) {
      console.log('SuperMap或Cesium已在全局可用');
      resolve();
      return;
    }
    
    // 如果未加载，等待一小段时间后再检查
    setTimeout(() => {
      if (window.SuperMap3D || window.Cesium) {
        console.log('延迟检测到SuperMap或Cesium');
        resolve();
      } else {
        console.warn('未检测到SuperMap组件，但已在index.html中引入');
        resolve(); // 仍然解析Promise以继续执行
      }
    }, 1000);
  });
}

// 活动标签
const activeTab = ref('alarm');

// 图表引用
const chartRef = ref(null);
let chart = null;

// 表格数据
const tableDataAlarm = reactive([
  { tunnelType: '特长隧道', tunnelName: '太平隧道', deviceName: '摄像机', deviceId: 'K100', content: '车辆碰撞起火', executed: true, operator: '小李' },
  { tunnelType: '隧道群', tunnelName: '石龙隧道', deviceName: '车检器', deviceId: 'K500', content: '超限值报警', executed: false, operator: '小刘' },
  { tunnelType: '隧道群', tunnelName: '丰岩隧道', deviceName: '气象仪', deviceId: 'K500+900', content: '网络故障', executed: true, operator: '小李' },
  { tunnelType: '特长隧道', tunnelName: '白云隧道', deviceName: '情报板1', deviceId: 'K610+200', content: '网络故障', executed: true, operator: '小刘' },
  { tunnelType: '特长隧道', tunnelName: '羊角隧道', deviceName: 'XXX设备', deviceId: 'K500', content: '网络故障', executed: true, operator: '小刘' },
]);
const tableDataFault = reactive([
  { tunnelType: '特长隧道', tunnelName: '太平隧道', deviceName: '摄像机', deviceId: 'K100', faultContent: '设备异常', executed: true, operator: '小李' },
  { tunnelType: '隧道群', tunnelName: '石龙隧道', deviceName: '车检器', deviceId: 'K500', faultContent: '网络故障', executed: false, operator: '小刘' },
  { tunnelType: '隧道群', tunnelName: '丰岩隧道', deviceName: '气象仪', deviceId: 'K500+900', faultContent: '网络故障', executed: true, operator: '小李' },
  { tunnelType: '特长隧道', tunnelName: '白云隧道', deviceName: '情报板1', deviceId: 'K610+200', faultContent: '设备异常', executed: true, operator: '小刘' },
  { tunnelType: '特长隧道', tunnelName: '羊角隧道', deviceName: 'XXX设备', deviceId: 'K500', faultContent: '网络故障', executed: true, operator: '小刘' },
]);

// 切换标签
function switchTab(tab) {
  activeTab.value = tab;
  // 这里可以根据标签切换加载不同的数据
  // 实际项目中可能需要从API获取数据
}

// 初始化图表
function initChart() {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['正常', '异常'],
        textStyle: {
          color: '#fff'
        },
        center: 0,
        top: 0,
        itemWidth: 12,
        itemHeight: 6,
        icon: 'rect'
      },
      grid: {
        left: '10%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['照明设备', '摄像机', '交通诱导', '环境设备', '消防设备'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位：套/台',
          max: 30,
          nameTextStyle: {
            color: '#fff',
            padding: [0, 30, 10, 0]
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        }
      ],
      series: [
        {
          name: '正常',
          type: 'bar',
          barWidth: 20,
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#3EC6FF'
          },
          data: [25, 20, 17, 16, 18]
        },
        {
          name: '异常',
          type: 'bar',
          barWidth: 20,
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#FF9F43'
          },
          data: [15, 12, 14, 9, 15]
        }
      ]
    };
    
    chart.setOption(option);
    
    // 响应窗口大小变化
    window.addEventListener('resize', () => {
      chart && chart.resize();
    });
  }
}

// 组件挂载时初始化图表
onMounted(() => {
  // 先加载SuperMap SDK，然后初始化图表
  loadSuperMapSDK()
    .then(() => {
      console.log('SuperMap SDK加载完成，初始化图表');
      initChart();
    })
    .catch(error => {
      console.error('SuperMap SDK加载失败:', error);
      // 即使SuperMap加载失败，也初始化图表
      initChart();
    });
});

// 从MainLayout中注入SuperMap实例引用
const supermapRef = inject('supermapRef', null);

// S3M模型相关变量
const fanModelLayer = ref(null);
const modelLoaded = ref(false);
const modelContainer = ref(null); // 保存模型容器引用

// 组件卸载时清理资源
onUnmounted(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  
  // 清理模型资源
  cleanupModelResources();
  
  window.removeEventListener('resize', () => {
    chart && chart.resize();
  });
});

// 清理模型资源的函数
function cleanupModelResources() {
  // 隐藏容器
  const container = document.getElementById('s3m-container');
  if (container) {
    container.style.display = 'none';
  }
  
  // 清理模型资源
  if (fanModelLayer.value) {
    try {
      if (fanModelLayer.value.destroy && typeof fanModelLayer.value.destroy === 'function') {
        fanModelLayer.value.destroy();
      } else if (Array.isArray(fanModelLayer.value.blades)) {
        // 移除实体
        const viewer = window.s3mViewer;
        if (viewer && viewer.entities) {
          if (fanModelLayer.value.tower) viewer.entities.remove(fanModelLayer.value.tower);
          if (fanModelLayer.value.nacelle) viewer.entities.remove(fanModelLayer.value.nacelle);
          fanModelLayer.value.blades.forEach(blade => {
            if (blade) viewer.entities.remove(blade);
          });
        }
      }
    } catch (error) {
      console.warn('清理模型资源失败:', error);
    }
    
    fanModelLayer.value = null;
  }
  
  modelLoaded.value = false;
}

// 加载风机S3M模型
function loadFanModel() {
  console.log('尝试加载风机模型');
  
  // 确保SuperMap组件已加载
  loadSuperMapSDK().then(() => {
    // 获取全局Cesium和SuperMap对象
    const SuperMap3D = window.SuperMap3D || {};
    const Cesium = window.Cesium;
    
    if (!Cesium) {
      console.error('未找到全局Cesium对象，无法加载模型');
      alert('3D库未加载，请刷新页面重试');
      return;
    }
    
    console.log('可用的全局对象:', {
      hasCesium: !!Cesium, 
      hasSuperMap3D: !!SuperMap3D
    });
    
    // 创建或获取模型容器
    let container = document.getElementById('s3m-container');
    if (!container) {
      container = document.createElement('div');
      container.id = 's3m-container';
      container.style.position = 'fixed';
      container.style.top = '0';
      container.style.left = '0';
      container.style.width = '100%';
      container.style.height = '100%';
      container.style.zIndex = '1000';
      container.style.backgroundColor = 'rgba(0,0,0,0.5)';
      document.body.appendChild(container);
      
      // 添加关闭按钮
      const closeButton = document.createElement('button');
      closeButton.textContent = '关闭';
      closeButton.style.position = 'absolute';
      closeButton.style.top = '10px';
      closeButton.style.right = '10px';
      closeButton.style.zIndex = '1001';
      closeButton.style.padding = '5px 15px';
      closeButton.style.backgroundColor = '#3ec6ff';
      closeButton.style.color = '#fff';
      closeButton.style.border = 'none';
      closeButton.style.borderRadius = '4px';
      closeButton.style.cursor = 'pointer';
      closeButton.style.fontSize = '14px';
      
      closeButton.addEventListener('click', () => {
        container.style.display = 'none';
      });
      
      container.appendChild(closeButton);
      
      // 创建视图容器
      const viewerContainer = document.createElement('div');
      viewerContainer.style.width = '100%';
      viewerContainer.style.height = '100%';
      viewerContainer.id = 's3m-viewer';
      container.appendChild(viewerContainer);
    }

    // 显示容器 - 使用渐变显示，减少闪烁
    container.style.display = 'block';
    container.style.opacity = '0';
    setTimeout(() => {
      container.style.transition = 'opacity 0.3s';
      container.style.opacity = '1';
    }, 10);

    // 获取或创建Cesium查看器
    let viewer = window.s3mViewer;

    if (!viewer) {
      try {
        console.log('创建Cesium查看器');
        
        // 使用最简化的配置创建Cesium查看器
        viewer = new Cesium.Viewer('s3m-viewer', {
          infoBox: false,
          selectionIndicator: false,
          animation: false,
          timeline: false,
          baseLayerPicker: false,
          geocoder: false,
          homeButton: false,
          sceneModePicker: false,
          navigationHelpButton: false,
          fullscreenButton: false,
          // 不设置任何底图，使用完全空的场景
          imageryProvider: false,
          baseLayerPicker: false
        });
        
        // 存储查看器引用
        window.s3mViewer = viewer;
        
        // 关闭不必要的功能
        viewer.scene.skyAtmosphere.show = false;
        viewer.scene.sun.show = false;
        viewer.scene.moon.show = false;
        viewer.scene.skyBox.show = false;
        viewer.scene.globe.show = false;
        
        // 使用纯黑背景
        viewer.scene.backgroundColor = Cesium.Color.BLACK;
        
        console.log('Cesium查看器创建成功');
      } catch (error) {
        console.error('创建Cesium查看器失败:', error);
        alert('创建3D视图失败，请刷新页面重试');
        return;
      }
    }
    
    // 隧道位置 - 使用重庆附近的坐标点
    const longitude = 107.0;  // 经度
    const latitude = 29.8;    // 纬度
    const height = 10;       // 高度
    
    // 检查是否已加载模型
    if (modelLoaded.value && fanModelLayer.value) {
      console.log('模型已加载，调整视角');
      
      // 飞行到模型位置
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-30),
          roll: 0
        }
      });
      return;
    }
    
    // 尝试加载S3M模型
    const scene = viewer.scene;

    // 定义可能的模型路径 - 移到外部以便所有函数可访问
    const modelPaths = [
      '/src/assets/models/风机.s3m',
      'src/assets/models/风机.s3m',
      './src/assets/models/风机.s3m',
      '../assets/models/风机.s3m',
      '/assets/models/风机.s3m',
      'assets/models/风机.s3m',
      '@/assets/models/风机.s3m',
      '../../../../assets/models/风机.s3m'
    ];

    try {
      console.log('尝试使用SuperMap3D直接加载S3M模型');
      
      // 直接使用模型路径
      const modelPath = 'src/assets/models/风机.s3m';
      
      // 检查是否有SuperMap3D对象
      if (window.SuperMap3D) {
        // 创建一个S3M图层
        try {
          const layer = new SuperMap3D.S3MInstanceCollection(scene._context);
          scene.primitives.add(layer);
          
          // 添加S3M模型
          const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
          const modelInstance = layer.add(modelPath, {
            position: position,
            scale: new Cesium.Cartesian3(1, 1, 1)
          });
          
          if (modelInstance) {
            console.log('S3M模型加载成功');
            fanModelLayer.value = layer;
            modelLoaded.value = true;
            
            // 飞行到模型位置
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000),
              orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-30),
                roll: 0
              }
            });
            
            return; // 加载成功，直接返回
          } else {
            console.warn('模型实例创建失败');
          }
        } catch (error) {
          console.warn('使用SuperMap3D.S3MInstanceCollection加载失败:', error);
        }
      }
      
      // 依次尝试加载模型
      tryLoadModel(0);
    } catch (error) {
      console.error('尝试加载S3M模型初始化失败:', error);
      loadFallbackModel(); // 使用备用模型
    }
    
    function tryLoadModel(index) {
      if (index >= modelPaths.length) {
        console.warn('所有S3M路径都无法加载，使用替代模型');
        loadFallbackModel();
        return;
      }
      
      const modelPath = modelPaths[index];
      console.log(`尝试加载S3M模型: ${modelPath}`);
      
      try {
        // 检查是否有SuperMap特有的S3M加载方法
        if (scene.addS3MTilesLayerByScp) {
          console.log('使用addS3MTilesLayerByScp方法加载');
          
          const promise = scene.addS3MTilesLayerByScp(modelPath, {
            name: '风机模型'
          });
          
          if (promise && typeof promise.then === 'function') {
            promise.then(layer => {
              if (layer) {
                console.log('S3M模型加载成功:', layer);
                fanModelLayer.value = layer;
                modelLoaded.value = true;
                
                // 飞行到模型位置
                viewer.camera.flyTo({
                  destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000),
                  orientation: {
                    heading: Cesium.Math.toRadians(0),
                    pitch: Cesium.Math.toRadians(-30),
                    roll: 0
                  }
                });
              } else {
                console.warn(`模型路径 ${modelPath} 加载返回空图层`);
                tryLoadModel(index + 1);
              }
            }).catch(error => {
              console.warn(`模型路径 ${modelPath} 加载失败:`, error);
              tryLoadModel(index + 1);
            });
          } else {
            console.warn(`模型路径 ${modelPath} 没有返回Promise`);
            tryLoadModel(index + 1);
          }
        } 
        // 检查是否有SuperMap3D特有的API
        else if (SuperMap3D && SuperMap3D.S3MTilesLayer) {
          console.log('使用SuperMap3D.S3MTilesLayer加载');
          
          try {
            const layer = new SuperMap3D.S3MTilesLayer(modelPath);
            scene.primitives.add(layer);
            
            fanModelLayer.value = layer;
            modelLoaded.value = true;
            
            // 飞行到模型位置
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000),
              orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-30),
                roll: 0
              }
            });
          } catch (error) {
            console.warn(`使用SuperMap3D API加载失败:`, error);
            tryLoadModel(index + 1);
          }
        } 
        // 如果没有特殊API，使用标准方法
        else {
          console.warn('无法找到SuperMap S3M加载方法');
          tryLoadModel(index + 1);
        }
      } catch (error) {
        console.warn(`加载路径 ${modelPath} 出错:`, error);
        tryLoadModel(index + 1);
      }
    }
    
    // 加载备用模型（当S3M加载失败时）
    function loadFallbackModel() {
      console.log('加载备用模型 - Cesium原生实体');
      
      // 使用Cesium原生实体创建一个风机模型
      try {
        // 使用更简单的方法创建风机模型，避免坐标转换问题
        const modelScale = 0.5;
        const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
        
        // 使用完全固定的模型位置
        const bladeCenter = Cesium.Cartesian3.fromDegrees(
          longitude, 
          latitude, 
          height + (400 * modelScale)
        );
        
        // 创建一个风机塔
        const towerEntity = viewer.entities.add({
          name: '风机塔',
          position: position,
          cylinder: {
            length: 400 * modelScale,
            topRadius: 15 * modelScale,
            bottomRadius: 30 * modelScale,
            material: Cesium.Color.LIGHTGRAY,
            slices: 16
          }
        });
        
        // 添加一个盒子作为风机机舱
        const nacelle = viewer.entities.add({
          name: '风机机舱',
          position: bladeCenter,
          box: {
            dimensions: new Cesium.Cartesian3(
              100 * modelScale, 
              50 * modelScale, 
              50 * modelScale
            ),
            material: Cesium.Color.LIGHTGRAY
          }
        });
        
        // 直接添加三个静态风叶，不使用动画
        const blades = [];
        for (let i = 0; i < 3; i++) {
          const blade = viewer.entities.add({
            name: `风叶${i+1}`,
            position: bladeCenter,
            box: {
              dimensions: new Cesium.Cartesian3(
                20 * modelScale, 
                200 * modelScale, 
                5 * modelScale
              ),
              material: Cesium.Color.WHITE
            },
            orientation: Cesium.Transforms.headingPitchRollQuaternion(
              bladeCenter,
              new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(i * 120), 0, 0)
            )
          });
          blades.push(blade);
        }
        
        // 存储模型引用
        fanModelLayer.value = {
          tower: towerEntity,
          nacelle: nacelle,
          blades: blades
        };
        
        modelLoaded.value = true;
        
        // 飞行到模型位置
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            longitude - 0.01,
            latitude - 0.01,
            height + 800
          ),
          orientation: {
            heading: Cesium.Math.toRadians(30),
            pitch: Cesium.Math.toRadians(-20),
            roll: 0
          },
          duration: 1,
          complete: function() {
            console.log('相机定位完成');
          }
        });
        
        console.log('备用风机模型创建成功');
      } catch (error) {
        console.error('创建备用模型失败:', error);
        alert('创建风机模型失败');
      }
    }
  }).catch(error => {
    console.error('加载SuperMap资源失败:', error);
    alert('3D库加载失败，请检查网络连接');
  });
}
</script>

<style lang="scss" scoped>
.device-overview-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-section {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  .panel-title {
    background: url("@/assets/image/TunnelOverviewPanel/组 2.png") no-repeat center/cover;
    width: 452px;
    height: 43px;
    padding: 3px 0 25px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: left;
  }

  .panel-content {
    width: 100%;
    background: url("@/assets/image/deviceOverview/1111111111111.png") no-repeat center/cover;
    padding: 16px;
    box-sizing: border-box;
  }
}

.device-overview-section {
  .panel-content {
    height: 250px;
    position: relative;
  }

  .chart-container {
    width: 100%;
    height: 100%;
  }
  
  .model-buttons {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 10;
    
    .model-btn {
      background: linear-gradient(to right, rgba(10, 30, 60, 0.8), rgba(62, 198, 255, 0.4));
      border: 1px solid #3ec6ff;
      color: #fff;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      
      &:hover {
        background: linear-gradient(to right, rgba(10, 30, 60, 0.9), rgba(62, 198, 255, 0.6));
        box-shadow: 0 0 8px rgba(62, 198, 255, 0.6);
      }
    }
  }
}

.device-status-section {
  .panel-content {
    padding-bottom: 10px;
  }

  .tabs-search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .tabs {
      display: flex;
      
      .tab-item {
        padding: 8px 15px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        color: #fff;
        
        &:first-child {
          border-radius: 4px 0 0 4px;
        }
        
        &:last-child {
          border-radius: 0 4px 4px 0;
        }

        &.active {
          background: url('@/assets/image/deviceOverview/矩形 21 拷贝 2.png') no-repeat center/cover;
          font-weight: 700;
          font-family: Source Han Sans CN, SourceHanSansCN-Regular;
        }
        
        &:not(.active) {
          background: url('@/assets/image/deviceOverview/矩形 21 拷贝 3.png') no-repeat center/cover;
          font-weight: 400;
          font-family: Source Han Sans CN;
        }
      }
    }
    
    .search-box {
      position: relative;
      
      input {
        width: 180px;
        height: 32px;
        // background: rgba(10, 30, 60, 0.8);
        border-radius: 4px;
        color: #fff;
        padding: 0 30px 0 10px;
        font-size: 14px;
        outline: none;
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
      }
      
      .search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 14px;
      }

    }
  }
  
  .table-container {
    width: 100%;
    overflow: hidden; /* 移除滚动条 */
    padding-bottom: 8px;
  }

  .device-table {
    min-width: 700px;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0 5px; // 行间距2px
    background: transparent;
    table-layout: fixed;
    
    th, td {
      padding: 10px 8px;
      text-align: center;
      color: #fff;
      border-bottom: 1px solid #0A252B;
      position: relative;
      font-size: 15px;
      font-family: inherit;
      background: transparent;
      transition: background 0.2s;
    }
    
    th {
      background: rgba(10, 30, 60, 0.8);
      font-weight: normal;
      color: #3ec6ff;
    }
    
    .table-row {
      background: url('@/assets/image/deviceOverview/组 98.png') no-repeat center/cover;
      
      &:hover td {
        background-color: rgba(62, 198, 255, 0.05);
      }
    }
    
    // 调整列宽度
    th:nth-child(1), td:nth-child(1) { width: 110px; min-width: 110px; }
    th:nth-child(2), td:nth-child(2) { width: 120px; min-width: 120px; }
    th:nth-child(3), td:nth-child(3) { width: 120px; min-width: 120px; }
    th:nth-child(4), td:nth-child(4) { width: 110px; min-width: 110px; }
    th:nth-child(5), td:nth-child(5) { width: 170px; min-width: 170px; }

    .table-badge {
      position: absolute;
      top: 0;
      right: 0;
    }
    
    .alert-content {
      color: #ff4d4f;
    }
  }
}
</style> 